<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(function () {
//        $('.con ul li').mouseover(function () {
//            //鼠标移入文字隐藏，图片显示
//            $(this).children('p').hide();
//            $(this).children('img').show();
//        })
//        $('.con ul li').mouseout(function () {
//            //鼠标一处文字显示，图片隐藏
//            $(this).children('p').show();
//            $(this).children('img').hide();
//        })
        $('.con ul li').hover(function () {
            $(this).children('p').toggle(100);
            $(this).children('img').toggle(100);

        })
    })
</script>
<head>
<style type="text/css">
    * { margin: 0; padding: 0; list-style:none;}
    .con { width: 320px;margin: 100px auto; border: 1px solid #000;text-align:center;}
    .con ul li { border-bottom: 1px dashed #ccc;padding: 10px 0;color: gold}
    .con ul li img {display: none;}
    .con ul li p {background: url(../../image/点.png) no-repeat 35px center;}
</style>

</head>
<body>
    <div class="con">
        <img src="../../image/栏目.png" width="166" height="46">
        <ul>
            <li>
                <p>图书文字：钢铁练成1</p>
                <img src="../../image/图书1.png" width="166" height="65" />
            </li>
            <li>
                <p>图书文字：钢铁练成1</p>
                <img src="../../image/图书1.png" width="166" height="65" />
            </li>
            <li>
                <p>图书文字：钢铁练成1</p>
                <img src="../../image/图书1.png" width="166" height="65" />
            </li>
            <li>
                <p>图书文字：钢铁练成1</p>
                <img src="../../image/图书1.png" width="166" height="65" />
            </li>
            <li>
                <p>图书文字：钢铁练成1</p>
                <img src="../../image/图书1.png" width="166" height="65" />
            </li>

        </ul>
    </div>
</body>
</html>
